<template>
  <div class="item" ref="actionItemArea">
    <a-row type="flex" align="middle" style="margin-bottom: 5px;">
      <a-col v-if="typeof index === 'number'">
        <div class="item-id">
          {{itemId}}
        </div>
      </a-col>
      <a-col :xs="6" :sm="6" :md="6" :lg="6" style="padding-right: 5px">
        <a-select v-model="step.event" placeholder="请选择事件">
          <a-select-opt-group label="默认事件">
            <a-select-option v-for="item in eventList.default" :value="item.name" :key="item.name">{{ item.displayName }}</a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="自定义事件">
            <a-select-option v-for="item in eventList.custom" :value="item.name" :key="item.name">{{ item.displayName }}</a-select-option>
          </a-select-opt-group>
          <a-select-opt-group label="虚拟事件">
            <a-select-option v-for="item in eventList.virtual" :value="item.name" :key="item.name">{{ item.displayName }}</a-select-option>
          </a-select-opt-group>
        </a-select>
      </a-col>
      <a-col :xs="12" :sm="12" :md="12" :lg="12" style="padding-right: 5px">
        <a-button icon="minus" v-on:click="removeItem" style="margin-right: 5px"></a-button>
        <a-button icon="plus" v-on:click="addItem" style="margin-right: 5px"></a-button>
        <a-button v-on:click="addRule" style="margin-right: 5px">添加筛选</a-button>
      </a-col>
    </a-row>
    <a-row style="padding-left: 15px">
      <MultiLevelFilter style="margin-top: 5px;" ref="filter" v-bind:properties="properties" v-model="step.filter" v-bind:datasourceId="datasourceId" v-on:remove="demote"></MultiLevelFilter>
    </a-row>
  </div>
</template>

<script>
import MultiLevelFilter from "../../../components/Filter/MultiLevelFilter";
export default {
  name: "ActionSequenceStep",
  components: {MultiLevelFilter},
  props: {
    events: Array,
    index: Number,
    step: Object,
    properties: Array,
    stepIndex: Number,
    datasourceId: Number
  },
  data () {
    return {
      eventList: {
        default: [],
        custom: [],
        virtual: []
      }
    }
  },
  methods: {
    addRule () {
      this.$refs.filter.addRule();
    },
    addItem () {
      this.$emit('add');
    },
    removeItem () {
      let index = this.step.name - 1;
      this.$emit('remove', index);
    },
    demote: function (index) {
      let originalFilter = this.step.filter;
      let filterIndex = originalFilter.filters.findIndex((item) => {
        return item.index === index;
      });
      if(filterIndex !== -1) {
        let filter = originalFilter.filters[filterIndex];
        originalFilter.filters.splice(filterIndex, 1);
        originalFilter.condition = filter.condition;
        filter.rules.forEach((item, index) => {
          originalFilter.rules.push(item);
        });
        filter.filters.forEach((item, index) => {
          originalFilter.filters.push(item);
        });
      }
    },
  },
  computed:{
    itemId (){
      return String.fromCharCode(65 + this.stepIndex) + this.step.name
    }
  },
  mounted () {
    let el = this.events
    if (el && el.length>0) {
      for (let i in el){
        if (el[i].type === 0){
          this.eventList.default.push(el[i])
        } else if (el[i].type === 1) {
          this.eventList.custom.push(el[i])
        } else if (el[i].type === 2) {
          this.eventList.virtual.push(el[i])
        }
      }
    }
  }
}
</script>

<style scoped>
.item-id{
  text-align: center;
  height: 100%;
  width: 30px;
  padding-left: 3px;
  padding-right: 3px;
  margin-right: 5px;
  background-color: rgba(30, 27, 244, 0.24);
}
</style>
